<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<html>
<head>
<title>Home</title>
<script src="../resources/js/echarts/dist/echarts.js"></script>
<script src="../resources/js/jquery.min.js"></script>

<script type="text/javascript">
	$(function() {
		var time_series;
		var cpu_load;
		$.ajax({
			url : 'cpu/7cf2e03c-abe8-48d1-89b7-46716f9ff813',
			async : false,
			success : function(data) {
				time_series = data.time_series;
				cpu_load = data.cpu_load;
			}
		})

		require.config({
			paths : {
				echarts : '../resources/js/echarts/dist'
			}
		});
		require([ 'echarts', 'echarts/chart/line' ], function(ec) {
			var myChart = ec.init(document.getElementById('cpu-chart'));
			var option = {
				title : {
					text : 'CPU Usage',
					subtext : 'demo'
				},
				tooltip : {
					trigger : 'axis'
				},
				legend : {
					data : [ 'CPU Usage' ]
				},
				toolbox : {
					show : true,
					feature : {
						mark : {
							show : true
						},
						dataView : {
							show : true,
							readOnly : false
						},
						magicType : {
							show : true,
							type : [ 'line', 'bar' ]
						},
						restore : {
							show : true
						},
						saveAsImage : {
							show : true
						}
					}
				},
				calculable : true,
				xAxis : [ {
					type : 'category',
					boundaryGap : false,
					data : time_series
				} ],
				yAxis : [ {
					type : 'value',
					axisLabel : {
						formatter : '{value} %'
					}
				} ],
				series : [ {
					name : 'CPU Usage',
					type : 'line',
					data : cpu_load,
					markPoint : {
						data : [ {
							type : 'max',
							name : 'maximum'
						}, {
							type : 'min',
							name : 'minimum'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : 'average'
						} ]
					}
				} ]
			}
			myChart.setOption(option);
		});
	});
</script>
</head>
<body>
	<div id="cpu-chart" style="height: 400px;"></div>
</body>
</html>
